<template>
    <div class="main">
        <div class="main-title">
            <h4>渠道包管理编辑</h4>
            <div class="btn-box">
                <el-button class="filter-item" type="primary" plain @click="$router.push({ name: 'channelPackage', params: { listQuery:listQuery }})">返回</el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="channeltab">
            <el-tab-pane label="基础信息" name="one">
                <el-form :model="formData" size="medium" ref="form" label-width="180px">
                    <el-form-item label="platform:" prop="platform" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.platform" placeholder="platform" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="渠道名称:" prop="channelName" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.channelName" placeholder="渠道名称"></el-input>
                    </el-form-item>
                    <el-form-item label="版本号:" prop="versions" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.versions" placeholder="版本号"></el-input>
                    </el-form-item>
                    <el-form-item label="IOS下载地址:" prop="downIosUrl" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.downIosUrl" placeholder="IOS下载地址" maxlength="250"></el-input>
                    </el-form-item>
                    <el-form-item label="ANDROID下载地址:" prop="downAndroidUrl" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.downAndroidUrl" placeholder="ANDROID下载地址" maxlength="250"></el-input>
                    </el-form-item>
                </el-form> 
                <el-button type="primary" @click="update" :loading="btnLoading" class="channel_update">保存</el-button> 
            </el-tab-pane>
            <el-tab-pane label="修改记录" name="two">
                 <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                    <el-table-column align="center" label="序号"  type="index" fixed  width="100px"></el-table-column>
                    <el-table-column align="center" label="版本号"  prop="versions">
                    </el-table-column>
                    <el-table-column align="center" label="IOS下载链接" prop="downIosUrl"></el-table-column>
                    <el-table-column align="center" label="ANDROID下载链接" prop="downAndroidUrl"></el-table-column>
                    <el-table-column align="center" label="更新时间"  prop="updateTime"></el-table-column>
                </el-table>
                <el-pagination class="channelPage"
                        v-if="paginationShow"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageIndex"
                        :page-sizes="[10, 20, 50, 100, 200]"
                        :page-size="pageSize"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listTotal">
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: 'channelPackageEdit',
    data() {
        return {
            activeName: 'one',
            formData:{
                platform: '',
                channelName: '',
                versions: '',
                downIosUrl: '',
                downAndroidUrl: '',
                id:''
            },
            listLoading: true,
            list: [],
            listTotal: 0,
            paginationShow: false,
            pageIndex: 1,
            pageSize: 10,
            btnLoading:false,
            listQuery: ''

        }
    },
    mounted() {
        this.formData = this.$route.params.channerData
        this.listQuery = this.$route.params.listQuery
    },
    methods:{
        handleClick() {
            if(this.activeName==='two'){
                this.getList()
            }
        },
        getList(){
          this.listLoading = true
          this.request({
            url: '/bsnl-product/platformBackup/list',
            method: 'post',
            data: {
                platformId: this.formData.id,
                pageIndex:this.pageIndex,
                pageSize:this.pageSize
            }
          }).then((res) => {
            this.list = res.data;
            this.listTotal = res.totalCount;
            this.listLoading = false;
            this.paginationShow = true
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
            this.paginationShow = true
          });
        },
         handleSizeChange (value) {
          this.pageSize = value
          this.getList()
        },
        handleCurrentChange (value) {
          this.pageIndex = value
          this.getList()
        },
        update() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                return false;
                }
                this.btnLoading = true;
                this.request({
                url: '/bsnl-product/platform/update',
                method: 'post',
                data: this.formData
                }).then(() => {
                this.btnLoading = false;
                this.$message.success('修改成功');
                this.getList();
                }).catch(err => {
                this.btnLoading = false;
                });
          });
        }
    }
}
</script>

<style scoped>
    .channeltab{
        background-color: #fff;
    }
    .channelPage{
        margin-bottom: 30px;
    }
    .channel_update{
        margin: 20px 180px;
    }
</style>
